<template>
  <van-skeleton title avatar :row="3" :loading="!state.init">
    <div v-if="state.init">
      <van-search v-model="state.value" placeholder="请输入搜索关键词" />
      <ul>
        <li v-for="item in search_value" @click="view(item.id)">
          <van-card :desc="item.desc" :title="item.name" :thumb="item.avatar+'?x=100&y=100'" />
        </li>
      </ul>
      <br />
      <br />
      <br />
    </div>
  </van-skeleton>

</template>

<script lang="ts">
import {ref, reactive, computed} from "vue";
import {IClubManage, IClub, IPagination} from "../../../interface"
import { useStore } from 'vuex';
import { defineComponent } from 'vue'
// const PinyinMatch = require('pinyin-match');
import PinyinMatch from "pinyin-match"
export default {
  setup() {
    const debug = false;
    const store = useStore();
    // const value = ref("");
    const club_manage:IClubManage = store.state.clb_manage;
    const state = reactive({
      clubs:[] as IClub[],
      init:false,
      value:""
    })
    const loadPage = async function () {
      let flags = [ ] as any
      if (!state.init) {
        let flag: boolean = true;
        let index: number = 0;
        let size: number = 20;
        while (flag) {
          let obj: any = await fetch("api/club/?page=" + index + "&size=" + size)
          let result: IPagination<any> = await obj.json();
          for (const resultElement of result.items) {
            flags.push({id:resultElement.id,ready:false});
            state.clubs[resultElement.id]={
              id: resultElement.id,
              desc: resultElement.introduction,
              name: resultElement.name,
              avatar: resultElement.favicon.path,
              content:""
            }
            for (let f of flags){
              if(f.id == resultElement.id){
                f.ready= true;
              }
            }

          }
          if (!result.page_info.has_next_page) {
            flag = false;
          }
        }

      }
      var flagHandle = setInterval(()=>{
        let tflag = true;
        if(debug){
          console.log(flags)
        }
        for( const f of flags){
          if( f.ready == false) {
            tflag = false;
          }
        }
        if(tflag){
          clearInterval(flagHandle);
          state.init = true;
        }
      },500)
    }
    loadPage();
    const search_value = computed(()=>{
      return state.clubs.filter(
          (data:IClub) =>
              !state.value ||
              data.name.toLowerCase().includes(state.value.toLowerCase()) ||
              data.desc.toLowerCase().includes(state.value.toLowerCase()) ||
              PinyinMatch.match(data.name,state.value) ||
              PinyinMatch.match(data.desc,state.value)
      ).sort((a:IClub,b:IClub )=>{
        return a.id - b.id
      })
    })
    return { club_manage,store,state,search_value};
  },
  methods: {
    view: function (id:number) {
      if (!id) {
        (this as any).$router.push("/ground");
      } else {
        (this as any).$router.push({
          path: "/ground",
          query: {
            id: id,
          },
        });
      }
    },
  },
};
</script>

<style></style>
